<template>
	<div class="system-role-container layout-padding">
		<div class="system-role-padding layout-padding-auto">
            <el-card shadow="hover" style="display: flex;flex-direction: column;flex: 1;height: inherit;">
                <section style="display: flex;flex-direction: column; flex: 1;height: inherit;">
                    <section style="flex: 1;height: inherit;overflow-y: auto;">
                        <el-form ref="ruleFormRef"  :model="state.form" label-width="180px">
                            <el-form-item label="图文封面：" prop="coverUrl">
                                <section>
                                    <el-image v-if="state.form.coverUrl != ''" class="mr20"
                                        style="width:64px; height: 64px;border-radius: 5px;" :src="state.form.coverUrl" fit="cover" />
                                    <section v-else class="selector-img" @click="addImg('imgUrl', 0)">
                                        <el-icon size="30" color="#999">
                                            <ele-Plus />
                                        </el-icon>
                                    </section>
                                </section>
                            </el-form-item>
                            <el-form-item label="标题：" prop="title">
                                <el-input v-model="state.form.title" class="width420" placeholder="请输入商品名称" />
                            </el-form-item>
                            <el-form-item label="作者：" prop="author">
                                <el-input v-model="state.form.author" class="width420" placeholder="请输入商品标题" />
                            </el-form-item>
                            <el-form-item label="文章分类：" prop="category">
                                <el-select class="width420" v-model="state.form.category"  placeholder="请选择文章分类">
                                    <el-option label="item.bindName" value="item.brandId" key="item.brandId" />
                                </el-select>&emsp;
                            </el-form-item>
                            <el-form-item label="文章简介：" prop="msg">
                                <el-input v-model="state.form.msg" type="textarea" class="width420"  placeholder="文章简介" />
                            </el-form-item>
                            <el-form-item label="文章内容：" prop="subTitle">
                                <section style="max-width: 1400px;">
                                    <Editor height="520px" v-model:get-html="state.form.content" :disable="state.form.disable"/>
                                </section>
                            </el-form-item>
                        </el-form>
                    </section>
                    <section style="text-align: center; margin:10px 0;">
                        <el-button type="primary">保 存</el-button>
                    </section>
                </section>
            </el-card>
        </div>
	</div>
</template>

<script setup lang="ts" name="funWangEditor">
import { defineAsyncComponent, reactive } from 'vue';
// 引入组件
const Editor = defineAsyncComponent(() => import('/@/components/editor/index.vue'));
// 定义变量内容
const state = reactive({
    form:{
        id:null,
        title:'',
        author:'',
        category:null,
        coverUrl:'',
        msg:'',
        content:'<p><span style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255); font-size: 14px;">胡歌，1982年9月20日出生于上海市徐汇区，中国内地影视男演员、流行乐歌手，</span><a href="https://baike.baidu.com/item/%E6%B0%91%E7%9B%9F/1971441?fromModule=lemma_inlink" target="_blank" style="text-indent: 28px; text-align: start;">民盟</a><span style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255); font-size: 14px;">盟员</span><span style="color: rgb(51, 102, 204); background-color: rgb(255, 255, 255); font-size: 12px;"><sup> [1]</sup></span><a href="" target="" style="text-indent: 28px; text-align: start;"> </a><span style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255); font-size: 14px;"> ，毕业于</span><a href="https://baike.baidu.com/item/%E4%B8%8A%E6%B5%B7%E6%88%8F%E5%89%A7%E5%AD%A6%E9%99%A2/1736818?fromModule=lemma_inlink" target="_blank" style="text-indent: 28px; text-align: start;">上海戏剧学院</a><span style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255); font-size: 14px;">表演系。</span></p>',
        disable: false,
    },
});
</script>
<style scoped lang="scss">
:deep(.el-card__body){
	display: flex;
	flex-direction: column;
	flex: 1;
	height: inherit;
}
.selector-img {
    width: 64px;
    height: 64px;
    border: 1px solid #ededed;
    border-radius: 5px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    &:hover {
        background-color: #f5f5f5;
        border: 1px solid #e4e3e3;
    }
}
</style>


